<template>
	<view class="page flex-col">
		<uni-nav-bar color="white" @clickLeft="back" :fixed="true" :background-color="navColor" status-bar
			left-icon="left" :border="false">
			<view class="top">
				选择商品
			</view>
		</uni-nav-bar>
		<view class="head">
			<view class="action">
				<view class="input-view">
					已添加{{products.length}}个商品
				</view>
				<image src="../../static/icon/add.png" @tap="add" mode="aspectFit"></image>
			</view>
		</view>
		<scroll-view :scroll-y="true" class="body">
			<view class="group_23 flex-col">
				<block v-for="(item,index) in products">
					<uni-swipe-action class="text-wrapper_18 ">
						<!-- 基础用法 -->
						<uni-swipe-action-item :right-options="options" @click="del(index)">
							<view class="block_5 flex-row">
								<image class="section_1 flex-col" mode="aspectFill" :src="image(item.productImage)"></image>
								<view class="text-wrapper_27 flex-col">
									<text class="text_4">{{item.productName}}</text>
									<view class=" rightline flex-row align-center">
										<text class="text_5">选择单位</text>
										<view class=" flex-row align-center">
											<view :class="['btn','flex-col',{active:item.unit=='箱'}]" @tap="selunit('箱',item)">
												<text class="text_7">箱</text>
											</view>
											<view class="btn flex-col" :class="[{active:item.unit=='提'}]" @tap="selunit('提',item)">
												<text class="text_9">提</text>
											</view>
										</view>
							
									</view>
							
									<view class="rightline flex-row"><text class="text_5">填写数量</text> <input class="selectcount"
											placeholder="请填写数量" type="number" @input="handleInput(item)" v-model="item.targetNum" /></view>
							
							
							
								</view>
							
							</view>
							
						</uni-swipe-action-item></uni-swipe-action>
					<view class="divide"></view>
				</block>
				<view class="text-wrapper_20 flex-col"  @tap="submit">
					<text class="text_38">确认</text>
				</view>
			</view>

		</scroll-view>
	</view>
</template>
<script>
	import helper from "../../utils/helper";
	import {
		agingApi as agingApi
	} from "../../utils/api";
	export default {
		data() {
			return {
				searchstr:"",
				navColor: 'transparent',
				products: [],
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				currentIndex:null
			};
		},
		
		onLoad(e) {
			this.currentIndex=parseInt(e.index) 
			
			var selected=uni.getStorageSync('seletedpro')
			
			this.products=selected
			uni.$off('addpro')
		},
		onShow() {
			
			uni.$once('addpro',(data)=>{
				
				var flag=true
				this.products.forEach((item)=>{
					if(item.productId==data.id){
						flag=false
					}
				})
				if(flag){
					this.products.push({productId: data.id,
							targetNum:0,
							productImage:data.image,
							productName:data.name,
							})
				}else{
					setTimeout(()=>{
						uni.showToast({
							title:'此产品已存在',
							icon:'none'
						})
					},500)
				}
				
			})
			
		},
		methods: {
			
			add(){
				uni.navigateTo({
					url: "/pages/disassemble/productlist"
				})
			},
				
			
			image(md5) {
				return helper.getImageUrl(md5);
			},
			
			selunit(value,item){
				if(item.unit==value){
					item.unit=null
					
				}else{
					item.unit=value
				}
				
			},
			handleInput(inputitem){
				this.products.forEach((item)=>{
					if(item.id==inputitem.id){
						this.products.targetNum=inputitem.targetNum
					}
				})
				
			},
			
			//产品删除
			del(index){
				
				this.products.splice(index, 1)
			},
			submit(){
				debugger
				var selected=[]
				this.products.forEach((item)=>{
					if(item.unit!=null){
						if(item.targetNum!=null&&item.targetNum!=""){
						selected.push(item)
						}
					}
				})
				this.back()
				uni.$emit("isRefresh", {index:this.currentIndex,pros:selected})
				
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
		},
	};
</script>
<style lang="scss">
	@import '../common/common.scss';
	@import './selectproducts.scss';
</style>